<template>
    <div id="chordchart">
        <div id="chord"></div>
        <div id="chordData">
          <el-button type="primary" size="mini" plain @click="RandomData">随机数</el-button>
          <el-button type="primary" size="mini" plain @click="addData">Add</el-button>
          <el-button type="primary" size="mini" plain @click="deleteData">Delete</el-button>
          <el-table :data="showData" height="230">
              <el-table-column v-for="node in nodes" :key="node.prop" :prop="node.prop" :label="node.label"></el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
import {ChordChart} from './ChordChart'
export default {
  data () {
    return {
      chordData: {},
      nodes: [],
      chordChart: '',
      showData: []
    }
  },
  created () {
    this.chordChart = new ChordChart('chord')
    this.setData()
  },
  mounted () {
    this.chordChart.data = this.chordData
    this.chordChart.draw()
  },
  methods: {
    setData () {
      this.chordData.name = ['one', 'two', 'three', 'four']
      this.nodes.push({
        prop: 'nodeName',
        label: 'nodeName'
      })
      this.chordData.relationship = []
      for (let i = 0; i < this.chordData.name.length; ++i) {
        let relation = []
        let show = {
          nodeName: this.chordData.name[i]
        }
        this.nodes.push({
          prop: this.chordData.name[i],
          label: this.chordData.name[i]
        })
        for (let j = 0; j < this.chordData.name.length; ++j) {
          if (i === j) {
            relation.push(0)
          } else {
            relation.push(parseInt(Math.random() * 40))
          }
          show[this.chordData.name[j]] = relation[relation.length - 1]
        }
        this.showData.push(show)
        this.chordData.relationship.push(relation)
      }
    },
    RandomData () {
      for (let i = 0; i < this.chordData.name.length; ++i) {
        for (let j = 0; j < this.chordData.name.length; ++j) {
          if (i !== j) {
            let value = parseInt(Math.random() * 40)
            this.chordData.relationship[i][j] = value
            this.showData[i][this.chordData.name[j]] = value
          }
        }
      }
      this.chordChart.data = this.chordData
      this.chordChart.update()
    },
    addData () {
      this.chordData.name.push('newItem-' + (this.chordData.name.length + 1))
      for (let i = 0; i < this.chordData.name.length - 1; ++i) {
        let value = parseInt(Math.random() * 40)
        this.chordData.relationship[i].push(value)
        this.showData[i][this.chordData.name[this.chordData.name.length - 1]] = value
      }
      let relation = []
      this.nodes.push({
        prop: this.chordData.name[this.chordData.name.length - 1],
        label: this.chordData.name[this.chordData.name.length - 1]
      })
      let show = {
        nodeName: this.chordData.name[this.chordData.name.length - 1]
      }
      for (let i = 0; i < this.chordData.name.length; ++i) {
        if (i === this.chordData.name.length - 1) {
          relation.push(0)
          show[this.chordData.name[i]] = 0
        } else {
          let value = parseInt(Math.random() * 40)
          relation.push(value)
          show[this.chordData.name[i]] = value
        }
      }
      this.showData.push(show)
      this.chordData.relationship.push(relation)
      this.chordChart.data = this.chordData
      this.chordChart.update()
    },
    deleteData () {
      let key = this.chordData.name.pop()
      console.log(key)
      this.chordData.relationship.pop()
      this.nodes.pop()
      for (let i = 0; i < this.chordData.relationship.length; ++i) {
        this.chordData.relationship[i].pop()
        delete this.showData[i][key]
      }
      this.showData.pop()
      console.log(this.showData)
      this.chordChart.update()
    }
  }
}
</script>
<style scoped>
#chordchart {
    height: 100%;
    width: 100%;
}
#chord {
    height: 70%;
    width: 100%;
}
#chordData {
    height: 30%;
    width: 100%;
}
</style>
